<template>
  <section class="knife-content">
    <my-header/>
    <!-- 广告位 -->
    <div class="guanggao-box">
      <img src="../../common/image/banner1.jpg" height="100px" />
    </div>
    <!-- 热门品牌 -->
    <section>
      <div class="line-box">热门品牌</div>
      <ul class="hot-brand-box">
        <li class="hot-brand-item" v-for="(bndItem, idx) in brandlist" :key="idx">
          <a href="#">{{bndItem}}</a>
        </li>
      </ul>
    </section>
    <letterSort/>
    <my-footer/>
  </section>
</template>

<script>
import { myFooter, myHeader, letterSort } from '@/components/index'
export default {
  components: {
    myFooter,
    myHeader,
    letterSort
  },
  data () {
    return {
      list: new Array(20).fill('刀'),
      brandlist: ['品牌一', '品牌二', '品牌三', '品牌四']
    }
  }
}
</script>

<style lang="stylus" scoped>
.hot-brand-box
  overflow hidden
  margin: 20px 18px;

  .hot-brand-item
    float left
    border 1px solid #fcfcfc
    font-size 24px
    background linear-gradient(90deg, #ffcc00, #ffcc88)
    margin-right 12px
    margin-bottom 12px
    padding 8px;
    border-radius: 8px
</style>
